{% extends 'base_product.html' %}
{% block body %}
    <div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
        <div class="col-md-6 px-0">
            <h2 class="display-4 fst-italic">{{ the_title }}</h2>
            <h4 class="fst-italic">You submitted the following data:</h4>
            <table>
                <tr>
                    <td>Phrase:</td>
                    <td>{{ the_phrase }}</td>
                </tr>
                <tr>
                    <td>Letters:</td>
                    <td>{{ the_letters }}</td>
                </tr>
            </table>
            <p class="lead mb-0"><a href="#" class="text-white fw-bold">When "{{ the_phrase }}" is search for
                "{{ the_letters }}", the folowing results are returned:</a></p>
            <h3 class="display-4 fst-italic">{{ the_results }}</h3>
        </div>
    </div>

{% endblock %}